{% extends 'base.html' %}
{% load static %}

{% block header-css %}
     <link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet">
{% endblock %}

{% block welcome %}{{ user }} {% endblock %}

{% block content %}
      <div class="card shadow mb-4">
        <div class="card-body">
          <div class="table-responsive">
              <!-- 列表开始 -->
              <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th width="20%">标题</th>
                        <th width="15%">申请人</th>
                        <th width="15%">申请时间</th>
                        <th width="40%">申请内容</th>
                        <th width="15%">审批时间</th>
                        <th width="10%">状态</th>
                    </tr>
                </thead>
                <tbody>
                {% for e in issue_lists %}
                    <tr class="odd gradeX">
                        <td>{{e.title}}</td>
                        <td>{{e.sender}}</td>
                        <td>{{e.send_time}}</td>
                        <td><span id="show_content" title="{{e.content}}}">{{e.content|slice:"20"}}</span></td>
                        <td class="center">{{e.audit_time}}</td>
                        <td class="center">
                        {% if e.status == 1 %}
                                <span class="badge badge-info">未提交</span>
                        {% elif e.status == 2 %}
                            {% if group == 'AUDIT' and request.user != 'wangjd' %}
                                <span class="btn btn-info" onclick="audit('{{e.issue_id}}')">审核</span>
                            {% else %}
                                <span class="badge badge-info">待审核</span>
                            {% endif %}
                        {% elif e.status == 3 %}
                            {% if user == 'wangjd' %}
                                <span class="btn btn-info" onclick="audit('{{e.issue_id}}')">审核</span>
                            {% else %}
                                <span class="badge badge-warning">审核一</span>
                            {% endif %}
                        {% elif e.status == 4 %}
                            {% if group == 'DBA' %}
                                <span class="btn btn-info" id="audit" data-toggle="modal" onclick="audit('{{e.issue_id}}')">执行</span>
                            {% else %}
                                <span class="badge badge-warning">审核二</span>
                            {% endif %}
                        {% elif e.status == 5 %}
                                <span class="badge badge-success">已执行</span>
                        {% elif e.status == 6 %}
                                <span class="badge badge-secondary">已驳回</span>
                        {% endif %}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            <!-- 列表结束 -->
          </div>
        </div>
    </div>

<!-- 模态框   -->
<div class="modal fade" id="myModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <!--  定义模态框，过渡效果为淡入，id为myModal,tabindex=-1可以禁用使用tab切换，aria-labelledby用于引用模态框的标题，aria-hidden=true保持模态框在触发前窗口不可见  -->
    <div class="modal-dialog">
        <!--  显示模态框对话框模型（若不写下一个div则没有颜色）  -->
        <div class="modal-content">
            <!--  显示模态框白色背景，所有内容都写在这个div里面  -->

            <div class="btn-info modal-header">
                <!--  模态框标题  -->
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <!--  关闭按钮  -->
<!--                    <h4>您好，欢迎进入模态框</h4>-->
                <!--  标题内容  -->
            </div>
            <div class="modal-body">
            <form method="post" class="form-horizontal" role="form" id="myForm" name="myForm">
                <!--  模态框内容，我在此处添加一个表单 -->
                <input type="hidden" id="mode_issue_id" name="issue_id" />
                <input type="hidden" id="mode_action" name="mode_action" value="pass" />
                <div class="form-group">
                    <label for="comment" class="col-sm-2 control-label">审核</label>
                    <div class="col-sm-9">
                        <textarea id="comment" name="comment" class="form-control well" ></textarea>
                    </div>
                </div>
            </form>
            </div>
            <div class="modal-footer">
                <!--  模态框底部样式，一般是提交或者确定按钮 -->
                <button type="button" id="audit_submit" class="btn btn-info" onclick="submit('pass')">通过</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="submit('reject')">驳回</button>
            </div>

        </div><!-- /.modal-content -->
    </div>
</div> <!-- /.modal -->


<!-- 模态框   -->
<div class="modal fade" id="modal_content"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="btn-info modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div id="mycontent">fdsfdasfdsafdsaf</div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block footer-js %}
<script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
<script type="text/javascript" src="{% static 'vendor/Buttons-1.6.1/js/dataTables.buttons.min.js' %}"></script>
<script type="text/javascript" src="{% static 'vendor/Buttons-1.6.1/js/buttons.bootstrap4.min.js' %}"></script>
<script type="text/javascript" src="{% static 'vendor/Buttons-1.6.1/js/buttons.html5.min.js' %}"></script>

<script>
$(document).ready(function() {
	$('#dataTable').DataTable( {
        order:[[0,'desc']],
        language:{
          url:'https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Chinese.json'
        },
	    dom: 'Bfrtip',
	    buttons: [
	        'csv',
	        'copy'
	    ]
	});

    // 点击申请内容现实完整的内容
	$('#show_content').click(function () {

        let str = $('#show_content').attr('title');

        // console.log(str);
        $('#mycontent').text(str);
        $('#modal_content').modal('toggle');

    })
});

function audit(id){
    console.log('audit');
    $('#mode_issue_id').val(id)
    $('#myModal').modal('toggle');

}

function show_content(c){
    console.log(c);

}

function submit(action) {
    console.log($('#myForm').serialize());
    if (action == 'reject') {
        $('#mode_action').val('reject');
    }

    $.ajax({
        type: "POST",
        dataType: "json",
        url: "{% url 'audit:audit1' %}",
        data: $('#myForm').serialize(),
        success: function (result) {
            console.log(result);
                alert(result.status);
                $('#myModal').modal('hide');
                window.location.reload();
                console.log("ok");
        },
        error: function (e) {
            alert(e);
        }
    });
}




// {# 放在document.readyw外面才能生效 #}
// function execute(_url) {
//     $.ajax({
//         url: _url,
//         success: function (json) {
//             alert(json['status']);
//             window.location.reload();
//         }
//     })
// }
//
// function myrefresh(){
// window.location.reload();
// }
// setTimeout('myrefresh()',120000);

</script>
{% endblock %}
